<template>
    <div class="project-form">
        <parser v-if="startParser" :form-conf="formConf" @submit="submitForm"/>
    </div>
</template>

<script>
import {postKeyValueRequest,postRequest,getRequest} from '@/api/api'
import Parser from '@/components/parser/Parser'
import {dbDataConvertForItemJson} from '@/utils/convert'

window.onload = function() {
    document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
            event.preventDefault()
        }
    })
    document.addEventListener('gesturestart', function(event) {
        event.preventDefault()
    })
}
export default {
    components: {
        Parser
    },
    props: {
        projectConfig: {
            projectKey: '',
            showBtns: true,
            // 项目种类  1 普通  2模板
            projectKind: 1
        }
    },
    data() {
        return {
            startParser: false,
            formConf: {
                fields: [],
                projectKey: '',
                projectKind: 1,
                __methods__: {},
                formRef: 'elForm',
                formModel: 'formData',
                labelFormModel: 'labelFormData',
                size: 'small',
                labelPosition: 'top',
                labelWidth: 100,
                formRules: 'rules',
                gutter: 15,
                disabled: false,
                span: 24,
                formBtns: true,
                resetBtn: false,
                submitBtnText: '提交',
                submitBtnColor: '#205bb5',
                showNumber: false,
                unFocusedComponentBorder: true
            }
        }
    },
    computed: {},
    watch: {},
    beforeCreate() {
        document.querySelector('body').className = 'project-body'
    },
    created() {
        if (this.projectConfig && this.projectConfig.projectKey) {
            this.formConf.projectKey = this.projectConfig.projectKey
            if (this.projectConfig.projectKind) {
                this.formConf.projectKind = this.projectConfig.projectKind
            }
        } else if (this.$route.query.key) {
            //不存去路由中尝试获取 iframe
            this.formConf.projectKey = this.$route.query.key
            if (this.$route.query.kind) {
                this.formConf.projectKind = this.$route.query.kind
            }
            this.formConf.formBtns = true
        }
        this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
    },
    mounted() {
        
        // 获取表单item
        getRequest(`/project/item/list?key=${this.$route.query.key}`).then(resp=>{
            console.log(resp)
            // this.formItem = resp.data
            // this.formConf.fields = resp.data
            // this.formConf.projectKey=resp.data[0].projectKey
            // console.log(this.formConf.fields)
            // console.log(resp.data[0].projectKey)
            let serialNumber = 1
            let fields = resp.data.map(element => {
                console.log('element')
                console.log(element)
                let projectItem = dbDataConvertForItemJson(element)
                console.log('projectItem')
                console.log(projectItem)
                projectItem.serialNumber = serialNumber
                serialNumber++

                return projectItem
            });
            this.formConf.fields = fields
            console.log('fields')
            console.log(fields)
            this.startParser = true
        })
    },
    methods: {
        submitForm(data) {
            console.log(data)
            this.$emit('submit', data)
        }
    }
}
</script>

<style lang="scss">

.project-form {

    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    width: 800px;
    padding: 0px;
    background-repeat: repeat;
    background-color: rgba(229, 239, 247, 0.87);
}

.project-body::-webkit-scrollbar {
    width: 0 !important;
    background: transparent;
}

.project-body {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}


.logo-img {
    max-height: 120px;
}

.submit-btn-form-item {
    text-align: left;
}

.submit-btn-form-item button {
    width: 20%;
}

@media screen and (max-width: 750px) {
    .project-form {
        margin: 0px;
        height: 100%;
        width: 100% !important;
        background-color: white;
    }

    .logo-img {
        max-height: 2.94rem;
    }
    .submit-btn-form-item {
        text-align: center;
    }
    .submit-btn-form-item button {
        width: 80%;
    }
}

@media screen and (max-width: 500px) {
    .el-message {
        min-width: 300px !important;
    }
}
</style>
